<template>
  <el-dialog
    class="public-dialog"
    title="添加VAT信息"
    width="560"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div class="mt-[8px]" :loading="loading">
      <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
        <el-form-item label="自定义编号" prop="custom_no">
          <el-input
            v-model="form.custom_no"
            placeholder="请输入自定义编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="VAT税号" prop="vat_tax">
          <el-input
            v-model="form.vat_tax"
            placeholder="请输入VAT税号"
          ></el-input>
        </el-form-item>
        <el-form-item label="进口申报日期" prop="import_declaration_date">
          <!-- <el-input v-model="form.import_declaration_date"></el-input> -->
          <el-date-picker
            v-model="form.import_declaration_date"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            class="w-[100%]"
          />
        </el-form-item>
        <el-form-item label="币种" prop="currency">
          <el-select v-model="form.currency" placeholder="请选择">
            <el-option
              v-for="item in dict.rateData"
              :key="item.currency"
              :label="item.currency"
              :value="item.currency"
              class="w-[100%]"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Duty金额" prop="duty_amount">
          <el-input-number
            :controls="false"
            v-model="form.duty_amount"
            class="w-[100%]"
            placeholder="请输入Duty金额"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="VAT金额" prop="vat_amount">
          <el-input-number
            :controls="false"
            v-model="form.vat_amount"
            class="w-[100%]"
            placeholder="请输入VAT金额"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="税金单号码" prop="tax_bill_no">
          <el-input
            v-model="form.tax_bill_no"
            placeholder="请输入税金单号码"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          :loading="loading"
          @click="handleSave"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { getRate } from "@/api/index.js";
import { vatAdd } from "../api/index.js";
const props = defineProps({
  ids: { type: Array, default: () => [] },
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
});
const form = ref({
  custom_no: null,
  vat_tax: null,
  import_declaration_date: null,
  duty_amount: null,
  currency: null,
  tax_bill_no: null,
});
const rules = reactive({
  custom_no: [
    {
      required: true,
      message: "请输入自定义编号!",
      trigger: "blur",
    },
  ],
  vat_tax: [
    {
      required: true,
      message: "请输入VAT税号!",
      trigger: "blur",
    },
  ],
  import_declaration_date: [
    {
      required: true,
      message: "请选择进口申报日期!",
      trigger: "change",
    },
  ],
  currency: [
    {
      required: true,
      message: "请选择币种!",
      trigger: "change",
    },
  ],
  duty_amount: [
    {
      required: true,
      message: "请输入Duty金额!",
      trigger: "blur",
    },
  ],
  vat_amount: [
    {
      required: true,
      message: "请输入VAT金额!",
      trigger: "blur",
    },
  ],
  tax_bill_no: [
    {
      required: true,
      message: "请输入税金单号码!",
      trigger: "blur",
    },
  ],
});
const emit = defineEmits(["update:modelValue", "refresh", "close"]);
const formRef = ref();
const loading = ref(false);
const handleSave = async () => {
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        loading.value = true;

        const { code, message } = await vatAdd({
          id: props.ids,
          vat_info: form.value,
        });
        if (code !== 200) return ElMessage.warning(message);
        ElMessage.success("新增成功!");
        handleClose(true);
      } catch (error) {
      } finally {
        loading.value = false;
      }
    }
  });
};
const dict = reactive({
  rateData: [],
});
const getRateList = async () => {
  const { data } = await getRate();
  dict.rateData = data || [];
};
getRateList();
const handleClose = async (refresh) => {
  form.value = {
    custom_no: null,
    vat_tax: null,
    import_declaration_date: null,
    duty_amount: null,
    currency: null,
    tax_bill_no: null,
  };
  formRef.value.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
